<template>
    <div class="header">
                        <div class="icon-button">
                            <i class="fa fa-home icon" aria-hidden="true"></i>
                        </div>
                        <div class="logo">后端管理系统</div>
                        <div class="userinfo">
                            <i class="fa fa-user-circle-o" style="font-size:
                                26px;" aria-hidden="true"></i>
                            <span style="font-size: 14px;margin-left:10px;">张三，你好啊</span>
                            <i class="fa fa-caret-down" style="font-size: 9px;"
                                aria-hidden="true"></i>
                        </div>
    </div>
</template>
<script>
export default {
  name: 'Header',
  components: {
    
  }
}
</script>
<style >
.header{
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            height: 70px;
            font-size: 22px;
            color: #fff;
            background-color: #242f42;
            position: relative;
        }
  .icon-button{
            line-height: 70px;
            cursor: pointer;
            float: left;
        }
        .logo{
            line-height: 70px;
            float: left;
          
        }
        .userinfo{
            line-height: 70px;
            float: right;
            padding-right: 88px;
            align-items: center;
            cursor: pointer;
            align-items: center;
        }
        .icon{
            display: inline-block;
            padding: 0 8px 0 21px;
            font-style: normal;
            font-size:32px;
            line-height: 2.2;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
        }
        
</style>